<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>6. 认识浏览器 | 被删的前端游乐场</title>
    <meta name="description" content="Just playing around">
    
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.a683ed26.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.e5cf4092.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.c853767c.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.eed49fdd.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/34.cdccbf8a.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.a683ed26.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link router-link-active">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link router-link-active">前端基础</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-0cd75e06><span class="stand" data-v-0cd75e06></span> <div class="cat" data-v-0cd75e06><div class="body" data-v-0cd75e06></div> <div class="head" data-v-0cd75e06><div class="ear" data-v-0cd75e06></div> <div class="ear" data-v-0cd75e06></div></div> <div class="face" data-v-0cd75e06><div class="nose" data-v-0cd75e06></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div> <div class="whisker-container" data-v-0cd75e06><div class="whisker" data-v-0cd75e06></div> <div class="whisker" data-v-0cd75e06></div></div></div> <div class="tail-container" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06><div class="tail" data-v-0cd75e06></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>前端入门</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-basic/front-end/front-end-1.html" class="sidebar-link">1. 什么是前端</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-2.html" class="sidebar-link">2. 编写页面</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-3.html" class="sidebar-link">3. HTML 和 CSS</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html" class="sidebar-link">4. DOM 和 BOM</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-5.html" class="sidebar-link">5. Javascript</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-6.html" class="active sidebar-link">6. 认识浏览器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-6.html#浏览器的结构" class="sidebar-link">浏览器的结构</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-6.html#页面请求" class="sidebar-link">页面请求</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-6.html#解析" class="sidebar-link">解析</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-6.html#渲染" class="sidebar-link">渲染</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-6.html#浏览器加载顺序" class="sidebar-link">浏览器加载顺序</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-6.html#参考" class="sidebar-link">参考</a></li></ul></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-7.html" class="sidebar-link">7. 代码调试</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-8.html" class="sidebar-link">8. Ajax 和 http</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-9.html" class="sidebar-link">9. 网络协议基础</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-10.html" class="sidebar-link">10. 理解 HTTP 协议</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>前端深入理解</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>本节我们从用户角度出发，认识浏览器的渲染机制吧。</p> <h1 id="浏览器"><a href="#浏览器" aria-hidden="true" class="header-anchor">#</a> 浏览器</h1> <p>浏览器的主要功能是展示网页资源，也即请求服务器并将结果显示在浏览器窗口中。<br>
资源的格式一般是 HTML，但也有 PDF、图片等其它各种格式。资源的定位由 URI(Uniform resource Identifier) 来实现。</p> <h2 id="浏览器的结构"><a href="#浏览器的结构" aria-hidden="true" class="header-anchor">#</a> 浏览器的结构</h2> <p>废话少说，先上图：
<img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/layers.png" alt="image"></p> <ol><li><p>用户接口（User Interface）<br>
包括地址栏，前进后退，书签菜单等窗口上除了网页显示区域以外的部分。</p></li> <li><p>浏览器引擎（Browser engine）：查询与操作渲染引擎的接口。</p></li> <li><p>渲染引擎（Rendering engine）。<br>
负责显示请求的内容，比如请求到<code>HTML</code>, 它会负责解析<code>HTML</code>与<code>CSS</code>并将结果显示到窗口中。</p></li> <li><p>网络（Networking）。<br>
用于网络请求, 如 HTTP 请求。它包括平台无关的接口和各平台独立的实现。</p></li> <li><p>UI 后端（UI backend）。<br>
绘制基础元件，如组合框与窗口。它提供平台无关的接口，内部使用操作系统的相应实现。</p></li> <li><p><code>JavaScript</code>解释器（JavaScript Interpreter）：用于解析执行<code>JavaScript</code>代码。</p></li> <li><p>数据存储（Data storage）。<br>
这是一个持久层。浏览器需要把所有数据存到硬盘上，如 cookies。<br>
新的<code>HTML</code>规范 (<code>HTML5</code>) 规定了一个完整（虽然轻量级）的浏览器中的数据库：<code>web database</code>。</p></li></ol> <p>以上大概是浏览器的主要结构，作为前端，除了大致都了解一下之外，这节我们主要关注渲染引擎和 JavaScript 解释器。<br>
当然，我们先从头理一下页面请求的过程。</p> <h2 id="页面请求"><a href="#页面请求" aria-hidden="true" class="header-anchor">#</a> 页面请求</h2> <p>当我们去面试的时候，常常会被问一个问题：在浏览器里面输入<code>url</code>，按下 enter 键，会发生什么？<br>
这是个或许平时我们不会思考的问题，不过在了解之后会对整个网页渲染有更好的认识。</p> <p>当我们按下 enter 键之后，浏览器就会发起一个 HTTP 请求，我们也可以从控制台看到：<br> <img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1512702987%281%29.png" alt="image"></p> <p>在这里，我们能看到所有浏览器发起的网络请求，包括页面、图片、CSS 文件、xhr 请求等等，还能看到请求的状态（<code>200</code>成功、<code>404</code>找不到、缓存、重定向等等）、耗时、请求头和内容、返回头和内容，等等等等。
这里涉及太多 http 相关的东西啦，先略过。</p> <p>这里第一个就是我们的页面请求，我们来看看返回了什么：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1512703607%281%29.png" alt="image"></p> <p>很明显，这里返回<code>&lt;html&gt;</code>页面，然后浏览器会加载页面，同时页面中涉及的资源也会触发请求下载，包括我们看到的<code>png</code>图片、<code>js</code>文件，这里没有<code>css</code>样式，大概是样式被直出到<code>&lt;html&gt;</code>页面里啦。</p> <p>当然，这里面没有体现请求发送出去之后的流程，下面是<strong>一个完整的 HTTP 请求过程</strong>：</p> <ul><li>域名解析（此处涉及<code>DNS</code>的寻址过程）</li> <li>发起<code>TCP</code>的 3 次握手</li> <li>建立<code>TCP</code>连接后发起<code>http</code>请求</li> <li>服务器响应<code>http</code>请求，浏览器得到<code>html</code>代码</li> <li>浏览器解析<code>html</code>代码，并请求 html 代码中的资源（如<code>js</code>、<code>css</code>、图片等，此处可能涉及<code>HTTP</code>缓存）</li> <li>浏览器对页面进行渲染呈现给用户（此处涉及浏览器的渲染原理）</li></ul> <p>关于最后一步，我们先上个图：<br> <img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/image013.png" alt="image">
这是我们的浏览器拿到源代码后，会进行的处理。</p> <p>上面这些环节，如果你还有哪些不是很清楚的，请抱着强烈的好奇心去把它们探索完成。</p> <h1 id="浏览器渲染机制"><a href="#浏览器渲染机制" aria-hidden="true" class="header-anchor">#</a> 浏览器渲染机制</h1> <h2 id="解析"><a href="#解析" aria-hidden="true" class="header-anchor">#</a> 解析</h2> <p>我们亲爱的浏览器会解析三个东西：</p> <ol><li><code>HTML/SVG/XHTML</code>。解析这三种文件会产生一个<code>DOM Tree</code>。（渲染引擎）</li> <li><code>CSS</code>，解析<code>CSS</code>会产生<code>CSS规则树</code>。（渲染引擎）</li> <li><code>Javascript</code>脚本，主要是通过<code>DOM API</code>和<code>CSSOM API</code>来操作<code>DOM Tree</code>和<code>CSS Rule Tree</code>。（JavaScript 解释器）</li></ol> <p>解析完成后，浏览器引擎会通过<code>DOM Tree</code>和<code>CSS Rule Tree</code>来构造<code>Render Tree</code>。</p> <p>大致流程如下图：
<img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/flow.png" alt="image"></p> <p>我们来看看它们都是些啥。</p> <h3 id="dom-tree"><a href="#dom-tree" aria-hidden="true" class="header-anchor">#</a> DOM Tree</h3> <p>前面也简单讲过 DOM 树了，这里再从<a href="http://coolshell.cn/articles/9666.html" target="_blank" rel="noopener noreferrer">《浏览器的渲染原理简介》<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>偷一下（噢，上面东西也是很多从这偷...参考的）：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Web page parsing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Web page parsing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>This is an example Web page.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>上面的这段<code>html</code>会生成这样的一个<code>DOM Tree</code>：<br> <img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/DOM-Tree-01.jpg" alt="image"></p> <p><code>DOM Tree</code>和<code>Render Tree</code>有个很简单的区别：像<code>header</code>或<code>display:none</code>的元素，会在<code>DOM Tree</code>中，但不会添加到<code>Render Tree</code>里。</p> <h3 id="render-tree"><a href="#render-tree" aria-hidden="true" class="header-anchor">#</a> Render Tree</h3> <p><code>CSS Rule Tree</code>主要是 Firefox 的产物。<br>
Firefox 基本上来说是通过<code>CSS</code>解析生成<code>CSS Rule Tree</code>，然后通过比对<code>DOM</code>生成<code>Style Context Tree</code>。<br>
然后 Firefox 通过把<code>Style Context Tree</code>和其<code>Render Tree（Frame Tree）</code>关联上，就完成了。</p> <p>Webkit 不像 Firefox 要用两个树来干这个，Webkit 也有<code>Style</code>对象，它直接把这个<code>Style</code>对象存在了相应的<code>DOM</code>结点上了。</p> <p>建立<code>CSS Rule Tree</code>是需要比照着<code>DOM Tree</code>来的。<code>CSS</code>匹配<code>DOM Tree</code>主要是从右到左解析<code>CSS</code>的<code>Selector</code>，这是一个相当复杂和有性能问题的事情。</p> <h2 id="渲染"><a href="#渲染" aria-hidden="true" class="header-anchor">#</a> 渲染</h2> <p>解析的角度大概讲完了，下面来从渲染的角度讲讲。</p> <h3 id="基本流程"><a href="#基本流程" aria-hidden="true" class="header-anchor">#</a> 基本流程</h3> <p>渲染的流程基本上如下（黄色的四个步骤）：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/Render-Process-Skipping-1024x282.jpg" alt="image"></p> <ol><li>计算<code>CSS</code>样式</li> <li>构建<code>Render Tree</code></li> <li><code>Layout</code>：定位坐标和大小，是否换行，各种 position, overflow, z-index 属性等等</li> <li>正式开画</li></ol> <p><strong>重新<code>Layout</code></strong><br>
图中有很多连接线，代表<code>Javascript</code>动态修改了<code>DOM</code>属性或是<code>CSS</code>属会导致重新<code>Layout</code>，有些改变不会，就是那些指到天上的箭头，比如，修改后的<code>CSS rule</code>没有被匹配到。</p> <p><strong>1. 重绘（Repaint）</strong><br> <strong>屏幕的一部分要重画，比如某个 CSS 的背景色变了。但是元素的几何尺寸没有变。</strong></p> <p><strong>2. 重排（Reflow）</strong><br> <strong>元件的几何尺寸变了（<code>Render Tree</code>的一部分或全部发生了变化，<code>Reflow</code>或<code>Layout</code>），需要重新验证并计算<code>Render Tree</code>。</strong><br> <code>HTML</code>使用的是流式布局，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫<code>Reflow</code>。</p> <p><code>Reflow</code>会从<code>&lt;html&gt;</code>这个<code>root frame</code>开始递归往下，依次计算所有的结点几何尺寸和位置，成本比<code>Repaint</code>的成本高得多的多。</p> <p>所以我们要注意以下一些操作，因为可能会导致性能降低：</p> <ul><li>增加、删除、修改<code>DOM</code>结点</li> <li>移动<code>DOM</code>的位置，或是搞个动画</li> <li>修改<code>CSS</code>样式</li> <li><code>Resize</code>窗口（移动端没有这个问题），或是滚动</li></ul> <p>了解这些以后，我们在写代码的时候就会下意识去比避免啦。当然，现在 MVVM 框架流行，以及 CSS3 普遍之后，手动操作<code>DOM</code>的场景也越来越少啦。</p> <h2 id="浏览器加载顺序"><a href="#浏览器加载顺序" aria-hidden="true" class="header-anchor">#</a> 浏览器加载顺序</h2> <h3 id="阻塞的-script-标签"><a href="#阻塞的-script-标签" aria-hidden="true" class="header-anchor">#</a> 阻塞的 script 标签</h3> <p>正常的网页加载流程是这样的：</p> <ol><li>浏览器一边下载 HTML 网页，一边开始解析</li> <li>解析过程中，发现<code>&lt;script&gt;</code>标签</li> <li>暂停解析，网页渲染的控制权转交给<code>JavaScript</code>引擎</li> <li>如果<code>&lt;script&gt;</code>标签引用了外部脚本，就下载该脚本，否则就直接执行</li> <li>执行完毕，控制权交还渲染引擎，恢复往下解析<code>HTML</code>网页</li></ol> <p><strong>将<code>js</code>放在<code>body</code>的最后面，可以避免资源阻塞，同时使静态的<code>html</code>页面迅速显示。</strong><br>
如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。<br> <code>html</code>需要等<code>head</code>中所有的<code>js</code>和<code>css</code>加载完成后才会开始绘制，但是<code>html</code>不需要等待放在<code>body</code>最后的<code>js</code>下载执行就会开始绘制。</p> <p><strong>将<code>css</code>放在<code>head</code>里，可避免浏览器渲染的重复计算。</strong><br>
经过上面的渲染过程，我们知道<code>Layout</code>的计算是比较消耗性能的，所以我们在开始计算<code>Render Tree</code>之前，就把所有的<code>css</code>文件拿到，这样可减少<code>Repaint</code>和<code>Reflow</code>。</p> <h2 id="参考"><a href="#参考" aria-hidden="true" class="header-anchor">#</a> 参考</h2> <ul><li><a href="http://taligarsiel.com/Projects/howbrowserswork1.htm" target="_blank" rel="noopener noreferrer">《How browsers work》<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://coolshell.cn/articles/9666.html" target="_blank" rel="noopener noreferrer">《浏览器的渲染原理简介》<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://www.cnblogs.com/yingsong/p/6170780.html" target="_blank" rel="noopener noreferrer">《html,css,js 加载顺序》<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h1 id="结束语"><a href="#结束语" aria-hidden="true" class="header-anchor">#</a> 结束语</h1> <p>这一节我们主要介绍了浏览器的主要结构、一些解析和渲染的机制。至于<code>js</code>文件的加载顺序、以及<code>js</code>代码的加载顺序等等，这里没有太多的讲解，小伙伴们可以自行去研究一下。</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-basic/front-end/front-end-6.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-basic/front-end/front-end-5.html" class="prev">
          5. Javascript
        </a></span> <span class="next"><a href="/front-end-playground/front-end-basic/front-end/front-end-7.html">
          7. 代码调试
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-5961" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty0.svg);"></div></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.e5cf4092.js" defer></script><script src="/front-end-playground/assets/js/3.c853767c.js" defer></script><script src="/front-end-playground/assets/js/2.eed49fdd.js" defer></script><script src="/front-end-playground/assets/js/34.cdccbf8a.js" defer></script>
  </body>
</html>
